import 'package:flutter/material.dart';

class TapBoxC extends StatefulWidget {

  final bool active;
  final ValueChanged onChangedActive;

  const TapBoxC({Key key, this.active, this.onChangedActive}) : super(key: key);

  @override
  _TapBoxCState createState() => _TapBoxCState();
}

class _TapBoxCState extends State<TapBoxC> {
  bool _highlight = false;


  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: _handleTapDown,
      onTapUp: _handleTapUp,
      onTap: _handleTap,
      onTapCancel: _handleTapCancel,
      child: Container(
        child: Center(
          child: Text(widget.active?"Active":"InActive",style: TextStyle(
            fontSize: 32.0,
            color: Colors.white
          ),),
        ),
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          color: widget.active?Colors.lightGreen[700]:Colors.grey[600],
          border: _highlight?Border.all(color: Colors.teal[700],width: 10.0):null,
        ),
      ),
    );
  }

  void _handleTapDown(TapDownDetails details) {
    setState(() {
      _highlight = true;
    });
  }

  void _handleTapUp(TapUpDetails details) {
    setState(() {
      _highlight = false;
    });
  }

  void _handleTap() {
    widget.onChangedActive(!widget.active);
  }

  void _handleTapCancel() {
    setState(() {
      _highlight = false;
    });
  }
}
